<template>
  <div :class="prefixCls">
    <!-- 如果有自定义组件则使用组件无则使用模型 -->
    <template v-if="data.componentName">
      <component
        :is="componentMap[data.componentName]"
        :modelId="data.modelId"
        :moduleId="moduleId"
        :modalParams="{
          moduleId,
          ...data,
          record,
          isComplex: true,
          preview,
          isUpdate,
          parentQuery,
          parentParam,
          detail,
        }"
        @detail="getDetails"
        :setActiveIndex="setActiveIndex"
        :dataSource="dataSource"
      />
    </template>
    <template v-else-if="data.modelClassify === MODEL_TYPE.FORM">
      <ComModelFormPage
        :modalParams="{
          moduleId,
          ...data,
          record,
          isComplex: true,
          preview,
          isUpdate,
          parentQuery,
          parentParam,
          detail,
          searchDefaultParam,
        }"
      />
    </template>
    <template v-else-if="data.modelClassify === MODEL_TYPE.LIST">
      <BasicModelTable
        class="complex-table"
        :modalParams="{
          moduleId,
          ...data,
          record,
          preview,
          parentQuery,
          parentParam,
          showTitle,
          detail,
          isComplex: true,
          searchDefaultParam,
        }"
        :tableProps="{
          inset: true,
          isCanResizeParent: pageType === PageTypeEnum.TILED,
          resizeHeightOffset: pageType === PageTypeEnum.TILED ? 0 : 32,
        }"
      />
    </template>
    <template v-else-if="data.modelClassify === MODEL_TYPE.COMPLEX">
      <ComModelComplex
        :modalParams="{
          moduleId,
          ...data,
          record,
          parentQuery,
          parentParam,
        }"
      />
    </template>
  </div>
</template>

<script lang="ts" setup name="ComModelPage">
  import { PropType, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { MODEL_TYPE } from '/@/api/config-center/model-design';
  import { BasicModelTable } from '/@/components/ModelTable';
  import ComModelComplex from './ComModelComplex.vue';
  import ComModelFormPage from './ComModelFormPage.vue';
  import { PageType, PageTypeEnum } from '../typing';
  import { useComplexContext } from '../useComplexContext';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  const { prefixCls } = useDesign('h-complex');

  const emit = defineEmits(['detail']);

  const props = defineProps({
    pageType: String as PropType<PageType>,
    total: {
      type: Number,
      default: 0,
    },
    data: {
      type: Object as PropType<Recordable>,
      default: () => {},
    },
    setActiveIndex: {
      type: Function,
      default: () => {},
    },
    searchDefaultParam: {
      type: Object as PropType<Recordable>,
      default: () => {},
    },
    dataSource: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });
  const componentMap = {
    ZKRQprojectContractor: createAsyncComponent(
      () => import('/@/views/zkrq/project-management/projecttContractor/index.vue'),
    ),
    ZKRQprojectCollect: createAsyncComponent(
      () => import('/@/views/zkrq/project-management/collect/index.vue'),
    ),
    JDWaterBox: createAsyncComponent(() => import('/@/views/jd/water-box/index.vue')),
    JdWaterTest: createAsyncComponent(() => import('/@/views/jd/water-verification/index.vue')),
  };

  const { parentQuery, parentParam, isUpdate, detail, preview, moduleId, record } =
    useComplexContext();

  const showTitle = computed(() => {
    const { total, pageType } = props;

    return pageType === PageTypeEnum.TILED && total > 1;
  });

  // 自定义组件通信
  const getDetails = (val) => {
    emit('detail', val);
  };
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-h-complex';

  .@{prefix-cls} {
    height: 100%;

    .complex-table {
      ::v-deep(.ant-table-wrapper) {
        margin: 0;
      }
    }
  }
</style>
